<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件冒泡</title>
    <style>
 .body{
    width: 1000px;
    height: 1000px;
        }
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
    </style>
    <script>
     window.onload=function(){
         var blueDiv=document.getElementsByClassName('blue')[0];
         var greenDiv=document.getElementsByClassName('green')[0];
         var redDiv=document.getElementsByClassName('red')[0];
         blueDiv.onclick=function(e){
             console.log(e);
            
             console.log('blue');
         }
         greenDiv.onclick=function(e){
            
             e.stopPropagation();//阻止事件冒泡
             console.log('green');
         }
         redDiv.onclick=function(e){
   
             console.log('red');
         }
         document.body.onclick=function(e){
   
             console.log('body');
             //只获取id为baidu的第一个元素
             document.getElementById('baidu').onclick=function(e){
                 e.preventDefault();//阻止元素的默认行为，标准浏览器
             }
         }
     }
    </script>
</head>
<body>
    <div class="red">
        <div class="green">
            <div class="blue">
                <a href="www baidu com"  style="color:white" id="baidu">百度一下</a>
            </div>
        </div>
    </div>
</body>
</html>